{% load staticfiles i18n %}
{% load compress %}
{% load seahub_tags avatar_tags group_avatar_tags %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
<title>{{ site_title }}</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="shortcut icon" href="{{ MEDIA_URL }}{{ favicon_path }}" />
{% compress css %}
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jstree_default_theme/style.min.css" />
<link rel="stylesheet" type="text/css" href="{% static "css/select2-3.5.2.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "css/magnific-popup.css" %}" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub.css?t=1398068110" />
{% endcompress %}

{% block extra_style %}{% endblock %}
{% if branding_css != '' %}<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}{{ branding_css }}" />{% endif %}
{% if enable_branding_css %}<link rel="stylesheet" type="text/css" href="{% url 'custom_css' %}" />{% endif %}
</head>

<body>
    <div id="wrapper" role="application" class="{{ LANGUAGE_CODE }} h100 d-flex fd-col">
        <!--[if lt IE 10]>
        <p id="top-browser-tip" class="top-bar>{% trans "We no longer support this version of IE. Please upgrade it to version 10 or above." %} <span id="top-browser-tip-close" class="top-bar-click">{% trans "Close" %}</span></p>
        <![endif]-->
        {% block info_bar_message %}
        {% if request.user.is_authenticated and request.cur_note %}
        <div id="info-bar">
            <p id="info-bar-info">{{ request.cur_note.message|urlize }}</p>
            <span class="close sf2-icon-x1 op-icon" title="{% trans "Close" %}"></span>
        </div>
        {% endif %}
        {% endblock info_bar_message %}

        <div id="main" class="container-fluid w100 flex-auto ovhd d-flex fd-col"> {# 'ovhd' is for firefox #}
            <div class="initial-loading">
                <span class="loading-icon loading-tip"></span>
            </div>

            <div class="row main-content flex-auto ovhd d-flex hide"> {# 'ovhd' is for firefox #}
                <div class="side-panel col-md-3">
                    <div class="side-panel-top panel-top">
                        <a href="{{ SITE_ROOT }}" id="logo">
                            {% if seacloud_mode %}
                            <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
                            {% else %}
                            <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
                            {% endif %}
                        </a>
                        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close side-panel-close op-icon hidden-md-up js-close"></a>
                    </div>
                    <div id="side-nav" class="home-side-nav" role="navigation"></div> {# #side-nav: to be compatible with old code #}
                </div>

                <div class="col-md-9 main-panel flex-auto ovhd">
                    <div class="main-panel-top panel-top">
                        <span class="sf2-icon-menu side-nav-toggle hidden-md-up" title="{% trans "Side Nav Menu" %}" id="js-toggle-side-nav" aria-label="{% trans "Side Nav Menu" %}"></span>
                        {# place for '<div class="cur-view-toolbar" id=""></div>' #}
                        <div class="common-toolbar">
                            {% if has_file_search %}
                                {% include 'snippets/search_form.html' %}
                            {% endif %}

                            <div id="notifications">
                                <a href="#" class="no-deco" id="notice-icon" title="{% trans "Notifications" %}" aria-label="{% trans "Notifications" %}">
                                    <span class="sf2-icon-bell"></span>
                                    <span class="num hide">0</span>
                                </a>
                            </div>

                            {% if show_logout_icon %}
                            <a id="logout-icon" href="{{ SITE_ROOT }}accounts/logout/" class="no-deco" title="{% trans "Log out" %}" aria-label="{% trans "Log out" %}"><span class="sf2-icon-logout"></span></a>
                            {% endif %}

                            <div id="account">
                                <a id="my-info" href="#" class="account-toggle no-deco hidden-sm-down" aria-label="{% trans "View profile and more" %}">
                                    {% avatar request.user 32 %} <span class="icon-caret-down vam"></span>
                                </a>
                                <span class="account-toggle sf2-icon-more mobile-icon hidden-md-up" aria-label="{% trans "View profile and more" %}"></span>
                            </div>
                        </div>
                    </div>

                    {# place for '<div class="main-panel-main" id=""></div>' #}
                </div>
            </div>
        </div> {# #main #}

        <div id="confirm-popup" class="hide">
            <div id="confirm-con"></div>
            <button id="confirm-yes">{% trans "Yes"%}</button>
            <button class="simplemodal-close">{% trans "No"%}</button>
        </div>

        <div id="guide-for-new" class="hide">
            <span class="icon-lightbulb fleft" aria-hidden="true"></span>
            <div class="txt">
                <h3 id="dialogTitle">{% blocktrans with site_name=site_name %}Welcome to {{site_name}}{% endblocktrans %}</h3>
                {% if user.permissions.can_add_repo %}
                <p>{% blocktrans with site_name=site_name %}{{site_name}} organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later.{% endblocktrans %}</p>
                {% else %}
                <p>{% blocktrans with site_name=site_name %}{{site_name}} organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries.{% endblocktrans %}</p>
                {% endif %}
                <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
            </div>
        </div>

    </div><!-- wrapper -->

{% include 'js/common-templates.html' %}
{% include 'js/templates.html' %}
<script type="text/javascript">
var app = {
    config: {
        mediaUrl: '{{ MEDIA_URL }}',
        siteRoot: '{{ SITE_ROOT }}',
        loginUrl: '{{ LOGIN_URL }}',
        csrfCookieName: '{{ CSRF_COOKIE_NAME }}',
        fileServerRoot: '{{ FILE_SERVER_ROOT }}'
    }
};
</script>
<script src="{{ STATIC_URL }}scripts/i18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>

{% block extra_script %}{% endblock %}

</body>
</html>
